<template>
	<!-- 联系我们页面 -->
	<view>
		<navBar title="联系我们"></navBar>

		<view style="padding-top: 20rpx;">
			<h1>团队成员</h1>
			<text style="color: #909399;font-size: 26rpx;">(如有问题，可添加开发人员微信或qq进行联系)</text>
		</view>

		<view class="info">
			<view v-for="(item,index) in info" :key="index" class="info-item">
				<view>
					<u-avatar size="180" :src="item.img"></u-avatar>
				</view>
				<view class="info-item-right">
					<view>姓名：{{item.name}}</view>
					<view>介绍：{{item.introduce}}</view>
					<view style="color: #2979FF;" @click="showWX(item.wx)">点击添加微信</view>
					<view>qq：{{item.qq}}</view>
					<view>技术栈：{{item.skill}}<text style="padding-left: 26rpx;">{{item.skill2}}</text></view>
					<!-- <view >{{}}</view> -->
				</view>
			</view>
		</view>

		<u-modal v-model="show" :show-title="false" :show-confirm-button="false" mask-close-able>
			<view style="height: 750rpx; width: 100%;">
				<image style="height: 100%; width: 100%;" :src="wx" mode=""></image>
			</view>

		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//模态框显示与隐藏
				show:false,
				//谈队成员信息
				info: [{
						name: '李彪',
						img: '../../static/avatar1.jpg',
						introduce: '一个前端',
						qq: '2940984391',
						wx:"../../static/wx1.jpg",
						skill: "Vue+Elment",
						skill2: "uniapp+uView"
					},
					{
						name: '姜俊杰',
						img: '../../static/avatar2.jpg',
						introduce: '要么程序跑，要么我跑！',
						qq: '2276253447',
						wx:"../../static/wx2.jpg",
						skill: "SpringBoot+MySQL"
					},
					{
						name: '祁宇',
						img: '../../static/avatar3.jpg',
						introduce: '11111',
						qq: '3542984587',
						wx:"../../static/wx3.jpg",
						skill: "Vue+Elment+Vant"
					}
				],
				//微信
				wx:"",
			};
		},
		methods:{
			//展示微信
			showWX(img){
				this.wx = img,
				this.show = true
			}
		}
	}
</script>

<style lang="scss">
	.info {
		padding-top: 100rpx;
		width: 95%;
		margin: 0 auto;

		.info-item {
			display: flex;
			padding-bottom: 80rpx;

			.info-item-right {
				padding-left: 25rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}
</style>
